import request from '../../utils/request';
import API from "../../config/API";

Page({
    data: {
        videoGroupList: [],     // 视频标签列表
        navId: '',              // 导航标识
        videoList: [],          // 视频列表
        videoId: '',            // 视频 id
        videoUpdateIimeList: [],    // 记录 video 播放的时长
        isTriggered: false,     // 标识下拉刷新是否被触发
        hasMore: false,        // 是否还有更多
        rcmdLimit: 0,           // 分页当前页码
    },
    // 获取视频导航标签列表数据
    async getVideoGroupList() {
        let resp = await request(API.videoGroupList);
        if (resp.code === 200) {
            this.setData({ 
                videoGroupList: resp.data.slice(0, 14),
                navId: resp.data[0].id 
            });
            // 获取视频列表
            this.getVideoList(this.data.navId);
        }
    },
    // 切换视频分类导航
    changeNav(e) {
        this.setData({ 
            navId: e.currentTarget.dataset.id,
            videoList: []
        });
        // 显示加载提示框
        wx.showLoading({ title: '加载中...', mask: true });
        // 动态获取当前导航标签对应的视频数据
        this.getVideoList(this.data.navId);
    },
    // 获取视频列表数据
    async getVideoList(id) {
        let resp = await request(API.videoGroup, { id });
        // 关闭加载提示框
        wx.hideLoading();
        if (resp.code === 200) {
            this.setData({ 
                videoList: resp.datas,
                hasMore: resp.hasmore,
                rcmdLimit: resp.rcmdLimit
            });
        }
        // 两秒钟后关闭下拉刷新
        clearTimeout(this.timer);
        this.timer = setTimeout(() => {
            this.setData({ isTriggered: false });
        }, 1500);
    },
    // 视频点击播放/继续播放的回调
    handlePlay(e) {
        /**
         * 问题：多个视频可以同时播放
         * 需求：
         *  1. 在点击播放的事件中需要找到上一个播放的视频
         *  2. 在播放新的视频之前关闭上一个正在播放的视频
         */
        let vid = e.currentTarget.id
        // 关闭上一个播放的视频
        this.vid !== vid && this.videoContext && this.videoContext.stop();
        this.vid = vid; 
        this.setData({ videoId: vid });
        // 创建控制 video 标签的实例对象
        this.videoContext = wx.createVideoContext(vid);
        // 判断当前视频之前是否播放过，是否有播放记录，如果有，跳转至指定的播放位置
        let videoUpdateTime = this.data.videoUpdateIimeList.find(item => item.vid === vid);
        if (videoUpdateTime) {
            this.videoContext.seek(videoUpdateTime.currentTime);
        }
        this.videoContext.play(); 
    },
    // 监听视频播放进度的回调
    handleTimeUpdate(e) {
        let { videoUpdateIimeList } = this.data;
        /**
         * 思路：判断记录播放时长的 videoTimeUpdateTimeList 数组中是否存在当前视频的播放记录
         *  1. 如果有：在原有的播放记录中修改播放时间为当前的播放时间
         *  2. 如果没有，需要在数组中添加当前视频的播放对象
         */
        let videoUpdateTime = videoUpdateIimeList.find(item => item.vid === e.currentTarget.id);
        if (videoUpdateTime) {
            videoUpdateTime.currentTime = e.detail.currentTime;
        } else {
            videoUpdateIimeList.push({ vid: e.currentTarget.id, currentTime: e.detail.currentTime });
        }
        this.setData({ videoUpdateIimeList });
    },
    // 视频播放结束的回调
    handleEnded(e) {
        // 移出记录播放时长数组中当前视频的对象
        let { videoUpdateIimeList } = this.data;
        let index = videoUpdateIimeList.findIndex(item => item.vid === e.currentTarget.id);
        videoUpdateIimeList.splice(index, 1);
        this.setData({ videoUpdateIimeList });
    },
    // 下拉刷新的回调
    handleRefresh() {
        // 再次发请求，获取最新的视频列表数据
        this.getVideoList(this.data.navId);
    },
    // 上拉加载
    handleToLower() {
        if (!this.data.hasMore) return;
        let { navId, videoList, rcmdLimit } = this.data;
        request(API.videoGroup, { id: navId, rcmdLimit: rcmdLimit + 1 })
            .then(resp => {
                if (resp.code === 200) {
                    videoList.push(...resp.datas);
                    this.setData({ 
                        videoList,
                        hasMore: resp.hasmore,
                        rcmdLimit: rcmdLimit + 1
                    });
                }
            });
    },
    /**
     * 生命周期函数--监听页面加载
     */
    onLoad: function (options) {
        this.getVideoGroupList();
    },
    /**
     * 生命周期函数--监听页面初次渲染完成
     */
    onReady: function () {

    },
    /**
     * 生命周期函数--监听页面显示
     */
    onShow: function () {

    },
    /**
     * 生命周期函数--监听页面隐藏
     */
    onHide: function () {

    },
    /**
     * 生命周期函数--监听页面卸载
     */
    onUnload: function () {

    },
    /**
     * 页面相关事件处理函数--监听用户下拉动作
     */
    onPullDownRefresh: function () {

    },
    /**
     * 页面上拉触底事件的处理函数
     */
    onReachBottom: function () {

    },
    /**
     * 用户点击右上角分享
     */
    onShareAppMessage: function () {
    }
})